<template>
    <el-space>
        <el-input v-model="searchResult" placeholder="Please input" class="input-with-select">
            <template #prepend>
                <el-select v-model="select" placeholder="Select" style="width: 115px">
                    <el-option label="单曲" :value="1" />
                    <el-option label="专辑" :value="10" />
                    <el-option label="歌手" :value="100" />
                    <el-option label="歌单" :value="1000" />
                    <el-option label="用户" :value="1002" />
                    <el-option label="MV" :value="1004" />
                    <el-option label="歌词" :value="1006" />
                    <el-option label="电台" :value="1009" />
                    <el-option label="视频" :value="1014" />
                </el-select>
            </template>
            <template #append>
                <el-button @click="getSearchResult(searchResult, select)">
                    <el-icon>
                        <Search />
                    </el-icon>
                </el-button>
            </template>
        </el-input>
        <!--  -->
    </el-space>

    <el-tabs v-model="select" class="demo-tabs" type="border-card">
        <el-tab-pane label="单曲" :name="1">
            <el-table height="500" :data="computedSearchListData" style="width: 100%">
                <el-table-column prop="id" label="歌曲id" />
                <el-table-column prop="name" label="歌名" />
                <el-table-column label="作者">
                    <template #default="{ row }">
                        <span v-for="item in row?.ar" :key="item?.id">{{ item.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属专辑">
                    <template #default="{ row }">
                        <el-image :preview-src-list="[row?.al?.picUrl]" preview-teleported hide-on-click-modal :src="row?.al?.picUrl" style="width:100px"></el-image>
                        <h3>专辑名称:{{ row?.al?.name }}</h3>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination small background layout="prev, pager, next" :total="searchList?.length" :page-size="pageSize"
                    v-model:current-page="currentPage" />
            </div>
        </el-tab-pane>
        <el-tab-pane label="专辑" :name="10">
            <el-table height="500" :data="computedSearchListData" style="width: 100%">
                <el-table-column prop="id" label="专辑id" />
                <el-table-column prop="name" label="专辑名" />
                <el-table-column prop="company" label="出版公司" />
                <el-table-column label="作者">
                    <template #default="{ row }">
                        <div v-for="item in row?.artists" :key="item?.id">
                            <p>演唱者:{{ item?.name }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="所属专辑">
                    <template #default="{ row }">
                        <el-image :preview-src-list="[row?.picUrl]" preview-teleported hide-on-click-modal  :src="row?.picUrl" style="width:100px"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="出版时间">
                    <template #default="{ row }">
                        {{ timestampToTime(row?.publishTime) }}
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination small background layout="prev, pager, next" :total="searchList?.length" :page-size="pageSize"
                    v-model:current-page="currentPage" />
            </div>
        </el-tab-pane>
        <el-tab-pane label="歌手" :name="100">
            <el-table height="500" :data="computedSearchListData" style="width: 100%">
                <el-table-column prop="id" label="歌手id" />

                <el-table-column label="头像">
                    <template #default="{ row }">
                        <el-image :preview-src-list="[row?.img1v1Url]" preview-teleported hide-on-click-modal :src="row?.img1v1Url" style="width: 100px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="歌手" />
                <el-table-column label="艺名">
                    <template #default="{ row }">
                        <span v-for="(item, index) in row?.alias" :key="index">{{ item }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="mvSize" label="MV数量" />

            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination small background layout="prev, pager, next" :total="searchList?.length" :page-size="pageSize"
                    v-model:current-page="currentPage" />
            </div>
        </el-tab-pane>
        <el-tab-pane label="歌单" :name="1000">
            <el-table height="500" :data="computedSearchListData" style="width: 100%">
                <el-table-column prop="id" label="歌单id" />

                <el-table-column label="封面">
                    <template #default="{ row }">
                        <el-image :preview-src-list="[row?.coverImgUrl]" preview-teleported hide-on-click-modal :src="row?.coverImgUrl" style="width: 100px;"></el-image>
                        <h3>{{ row?.name }}</h3>
                    </template>
                </el-table-column>
                <el-table-column prop="creator.nickname" label="作者信息" />
                <el-table-column prop="description" label="专辑描述" />
            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination small background layout="prev, pager, next" :total="searchList?.length" :page-size="pageSize"
                    v-model:current-page="currentPage" />
            </div>
        </el-tab-pane>
        <el-tab-pane label="用户" :name="1002">
            <el-table height="500" :data="computedSearchListData" style="width: 100%">
                <el-table-column prop="userId" label="用户id" />

                <el-table-column label="头像">
                    <template #default="{ row }">
                        <el-image :preview-src-list="[row?.avatarUrl]" preview-teleported hide-on-click-modal :src="row?.avatarUrl" style="width: 100px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="昵称" />
                <el-table-column prop="signature" label="个人说明" />
            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination small background layout="prev, pager, next" :total="searchList?.length" :page-size="pageSize"
                    v-model:current-page="currentPage" />
            </div>
        </el-tab-pane>
        <el-tab-pane label="MV" :name="1004">
            <el-table height="500" :data="computedSearchListData" style="width: 100%">
                <el-table-column prop="id" label="MVid" />
                <el-table-column label="MV封面">
                    <template #default="{ row }">
                        <el-image :preview-src-list="[row?.cover]" preview-teleported hide-on-click-modal :src="row?.cover" style="width: 100px;"></el-image>
                        <h3>{{ row?.name }}</h3>
                    </template>
                </el-table-column>
                <el-table-column prop="artistName" label="主创作者" />
                <el-table-column label="作者">
                    <template #default="{ row }">
                        <span v-for="item in row?.artists" :key="item?.id">{{ item?.name }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination small background layout="prev, pager, next" :total="searchList?.length" :page-size="pageSize"
                    v-model:current-page="currentPage" />
            </div>
        </el-tab-pane>
        <el-tab-pane label="歌词" :name="1006">
            <el-table height="500" :data="computedSearchListData" style="width: 100%">
                <el-table-column prop="id" label="歌曲Id" />
                <el-table-column prop="name" label="歌名" />
                <el-table-column label="歌词">
                    <template #default="{ row }">
                         <el-scrollbar height="200px">
                            <p v-for="(item, index) in row?.lyrics" :key="index">{{ item }}</p>
                        </el-scrollbar>
                    </template>
                </el-table-column>
                <el-table-column label="封面">
                    <template #default="{ row }">
                        <div v-for="item in row?.ar" :key='item?.id'>
                            <p>作者ID: {{ item?.id }}</p>
                            <p>作者名:{{ item?.name }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="封面">
                    <template #default="{ row }">
                        <el-image :preview-src-list="[row?.al?.picUrl]" preview-teleported hide-on-click-modal style="width: 100px;" :src="row?.al?.picUrl"></el-image>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination small background layout="prev, pager, next" :total="searchList?.length" :page-size="pageSize"
                    v-model:current-page="currentPage" />
            </div>
        </el-tab-pane>
        <el-tab-pane label="电台" :name="1009">
            <el-table height="500" :data="computedSearchListData" style="width: 100%">
                <el-table-column prop="id" label="电台id" />

                <el-table-column label="电台详情">
                    <template #default="{ row }">
                        <el-image :preview-src-list="[row?.picUrl]" preview-teleported hide-on-click-modal :src="row?.picUrl" style="width: 100px;"></el-image>
                        <h3>{{ row?.name }}</h3>
                    </template>
                </el-table-column>
                <el-table-column prop="desc" label="电台描述" />
                <el-table-column label="分类">

                    <template #default="{ row }">
                        <p>分类id:{{ row?.categoryId }}</p>
                        <p>一级分类:{{ row?.category }}</p>
                        <p>二级分类:{{ row?.secondCategory }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="commentCount" label="评论数量" />
                <el-table-column prop="playCount" label="播放次数" />
                <el-table-column prop="shareCount" label="分享次数" />
                <el-table-column prop="subCount" label="订阅次数" />
                <el-table-column label="创建时间">
                    <template #default="{ row }">
                        <span>{{ timestampToTime(row?.createTime) }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination small background layout="prev, pager, next" :total="searchList?.length" :page-size="pageSize"
                    v-model:current-page="currentPage" />
            </div>
        </el-tab-pane>
        <el-tab-pane label="视频" :name="1014">
            <el-table height="500" :data="computedSearchListData" style="width: 100%">
                <el-table-column prop="vid" label="视频id" />
                <el-table-column label="视频封面">
                    <template #default="{ row }">
                        <el-image :preview-src-list="[row?.coverUrl]" preview-teleported hide-on-click-modal :src="row?.coverUrl" style="width: 100px;"></el-image>
                        <h3>{{ row?.title }}</h3>
                    </template>
                </el-table-column>
                <el-table-column label="持续时间">
                    <template #default="{ row }">
                        {{ msToTime(row?.durationms) }}
                    </template>
                </el-table-column>
                <el-table-column label="作者">
                    <template #default="{ row }">
                        <p v-for="item in row?.creator" :key="item?.id">作者名:{{ item?.userName }}</p>
                    </template>
                </el-table-column>

            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination small background layout="prev, pager, next" :total="searchList?.length" :page-size="pageSize"
                    v-model:current-page="currentPage" />
            </div>
        </el-tab-pane>

    </el-tabs>
</template>

<script>
import { searchInterface } from '@/api/search';
import { Search } from '@element-plus/icons-vue'
import { timestampToTime } from '@/utils/date'
import { msToTime } from '@/utils/msToTime'
export default {
    data() {
        return {
            searchResult: '',
            searchList: [],
            select: 1,
            timestampToTime,
            msToTime,
            // 当前页数
            currentPage: 1,
            // 一页多少条数据
            pageSize: 5,

        }
    },
    computed: {
        computedSearchListData() {
            return this.searchList.slice((this.currentPage - 1) * this.pageSize, (this.currentPage - 1) * this.pageSize + this.pageSize)
        }
    },
    components: {
        Search
    },
    watch: {
        select() {
            // 当搜索内容不为空时调用搜索接口
            this.searchResult && this.getSearchResult(this.searchResult, this.select)
        }
    },
    methods: {
        // 搜索内容
        getSearchResult(keywords, type) {

            searchInterface({ keywords, type }).then(res => {
                /* 
                    type: 搜索类型；默认为 1 即单曲 , 
                    取值意义 : 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户,
                    1004: MV, 1006: 歌词, 1009: 电台, 1014: 视频, 1018:综合,
                    2000:声音(搜索声音返回字段格式会不一样)
                */
                switch (type) {
                    case 1:
                        console.log('单曲', res);
                        this.searchList = res.result.songs
                        break;
                    case 10:
                        console.log('专辑', res);
                        this.searchList = res.result.albums
                        break;
                    case 100:
                        console.log('歌手', res);
                        this.searchList = res.result.artists
                        break;
                    case 1000:
                        console.log('歌单', res);
                        this.searchList = res.result.playlists
                        break;
                    case 1002:
                        console.log('用户', res);
                        this.searchList = res.result.userprofiles
                        break;
                    case 1004:
                        console.log('MV', res);
                        this.searchList = res.result.mvs

                        break;
                    case 1006:
                        console.log('歌词', res);
                        this.searchList = res.result.songs
                        break;
                    case 1009:
                        console.log('电台', res);
                        this.searchList = res.result.djRadios
                        break;
                    case 1014:
                        console.log('视频', res);
                        this.searchList = res.result.videos
                        break;
                    // case 1018:
                    //     console.log('综合', res);
                    //     break;
                    // case 2000:
                    //     console.log('声音', res);
                    //     break;
                }
            })
        },
    },



}
</script>

<style lang="scss" scoped></style>
